<!-- 添加修改地址 -->
<template>
	<view class="address-wrap">
		<shopro-login-modal></shopro-login-modal>
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<!-- 地址定位 -->
			<!-- <view class="location-item u-flex u-row-between u-p-20 u-m-b-20" @tap="getLocation">
				<view class="u-flex">
					<u-icon name="map" size="28" color="#a76f0d"></u-icon>
					<text>{{ chooseAddress }}</text>
				</view>
				<u-icon name="arrow-right" size="28" color="#666"></u-icon>
			</view> -->

			<view class="address-box">
				<!-- 地址表单 -->
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="收货人:"
					prop="username">
					<u-input placeholder="请填写收货人姓名" v-model="model.username" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="手机号:"
					prop="mobile">
					<u-input placeholder="请输入收货人手机号" v-model="model.mobile" type="number"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="所在地区:"
					prop="area_text">
					<u-input type="select" v-model="model.area_text" :select-open="showSelect" placeholder="请选择地区"
						@click="showSelect = true"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="left" label-width="150" label="详细地址:"
					prop="address">
					<u-input border type="textarea" v-model="model.address" placeholder="如道路、门牌号、小区、楼栋号、单元室等" />
				</u-form-item>
			</view>

			<!-- 设置默认 -->
			<view class="default-box u-flex u-row-between">
				<text class="title">设为默认地址</text>
				<u-switch v-model="model.isdefault" activeColor="#e9b461" size="40" active-value="1" inactive-value="0">
				</u-switch>
			</view>

			<!-- 功能按钮 -->
			<view class="foot_box u-p-30 u-m-t-50 u-flex u-row-around">
				<button v-show="addressId" class=" u-m-20 u-reset-button delete-btn u-flex-1"
					@tap="deleteAddress">删除收货地址</button>
				<button class=" u-m-20 u-reset-button save-btn u-flex-1" @tap="submit">保存收货地址</button>
			</view>
		</u-form>

		<!-- 省市区选择器 -->
		<!-- <u-select mode="mutil-column-auto" safe-area-inset-bottom :list="addressAreaList" v-model="showSelect"
			@confirm="regionConfirm"></u-select> -->
		<!-- <u-select mode="mutil-column" safe-area-inset-bottom :list="addressAreaList" v-model="showSelect"
				@confirm="regionConfirm"></u-select> -->
		<!-- <u-picker mode="multiSelector" :default-selector="defaultSelector" v-model="showSelect" :range="addressAreaList"
			range-key="name" @columnchange="columnchange" @confirm="addressConfirm"></u-picker> -->
		<u-select mode="mutil-column-auto" :list="addressAreaList" v-model="showSelect" @confirm="addressConfirm">
		</u-select>
		<!-- 删除提示 -->
		<u-modal v-model="removeFlage" show-confirm-button show-cancel-button content="是否确定删除地址!"
			@confirm="removeConfirm" @cancel="removeCancel" cancel-text="取消" confirm-color="#ff0000"></u-modal>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				showSelect: false, //省市区
				addressAreaList: [
					[],
					[],
					[],
					[]
				],
				addressId: 0, //收货地址ID
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '600',
					color: '#595959'
				},
				model: {
					"username": "", //姓名
					"mobile": "", //联系方式
					"city": "", //市
					"address": "", //详细地址
					"province": "", //省
					"isdefault": 0, //是否设为默认地址 1是  0否
					"district": "", //区
					"street": "" //镇/街道/县
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入收货人手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}
					],
					username: [{
						required: true,
						message: '请填写收货人姓名',
						trigger: ['change', 'blur']
					}],
					area_text: [{
						required: true,
						message: '请选择地区',
						trigger: ['change', 'blur']
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}]
				},
				errorType: ['message'],
				chooseAddress: '点击选择地理位置', //定位地址
				defaultSelector: [0, 0, 0],
				removeFlage: false,
			};
		},
		computed: {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			if (this.$Route.query.obj) {
				// this.$set(this.model,);
				this.model = Object.assign({}, this.model, this.$Route.query.obj);
				
				this.$set(this.model, 'area_text', this.model.province + '-' + this.model.city + '-' + this.model
				.district);
			}
			this.getArea();
			this.addressId = this.$Route.query.id ? this.$Route.query.id : 0;

			this.model.setkey = this.$Route.query.id ? this.$Route.query.id : 0;
			uni.setNavigationBarTitle({
				title: this.addressId ? '编辑收货地址' : '添加收货地址'
			});
			// this.addressId && this.getAddressInfo();
			// 微信导入
			// this.$Route.query.addressData && this.wxAddressInit();
		},
		methods: {
			// 获取省市区
			getArea() {
				// this.$http('address.area').then(res => {
				// 	if (res.code === 1) {
				// 		let { provinceData, cityData, areaData } = res.data;
				// 		provinceData.forEach((item, index) => {
				// 			this.addressAreaList.push({ ...item, children: [] });
				// 			this.addressAreaList[index].children.push(...cityData[index]);
				// 			this.addressAreaList[index].children.forEach((item1, index1) => {
				// 				item1['children'] = [];
				// 				item1.children.push(...areaData[index][index1]);
				// 			});
				// 		});
				// 	}
				// });

				// let {
				// 	provinceData,
				// 	cityData,
				// 	areaData
				// } = addressLoaction;
				// provinceData.forEach((item, index) => {
				// 	this.addressAreaList.push({
				// 		...item,
				// 		children: []
				// 	});
				// 	this.addressAreaList[index].children.push(...cityData[index]);
				// 	this.addressAreaList[index].children.forEach((item1, index1) => {
				// 		item1['children'] = [];
				// 		item1.children.push(...areaData[index][index1]);
				// 	});
				// });
				// this.addressAreaList = [
				// 	[{
				// 			cateName: '1',
				// 			id: 1
				// 		},
				// 		{
				// 			cateName: '2',
				// 			id: 2
				// 		}
				// 	],
				// 	[{
				// 			cateName: '3',
				// 			id: 1
				// 		},
				// 		{
				// 			cateName: '4',
				// 			id: 2
				// 		}
				// 	]
				// ]

				// this.getAddressColunm(0);
				this.getAddressColunm();
			},

			getAddressColunm() {
				this.$http.get('user.getCity').then(res => {
					this.addressAreaList = this.$tools.addressToTree(res.data);
				})
				// this.$http.post('personal.address.arealist', {
				// 	pid: pid
				// }).then(res => {
				// 	this.$set(this.addressAreaList, deepindex, res.data);
				// 	deepindex++;
				// 	if (deepindex > 3) {
				// 		return
				// 	}
				// 	this.getAddressColunm(this.addressAreaList[deepindex - 1][0]['id'], deepindex);
				// })
			},
			columnchange(e) {
				console.log(e);
				console.log(this.addressAreaList[e.column][e.index]['id']);
				this.defaultSelector[e.column] = e.index;
				this.getAddressColunm(this.addressAreaList[e.column][e.index]['id'], e.column + 1);
			},
			addressConfirm(e) {
				this.model.province = e[0]['label'];
				this.model.city = e[1]['label'];
				this.model.district = e[2]['label'];
				this.model.area_text = `${this.model.province}-${this.model.city}-${this.model.district}`;
				// let province = this.addressAreaList[0][e[0]];
				// let city = this.addressAreaList[1][e[1]];
				// let county = this.addressAreaList[2][e[2] ? e[2] : '0'];
				// let town = this.addressAreaList[3][e[3] ? e[3] : '0'];
				// this.model.addr_province_id = province['id'];
				// this.model.addr_city_id = city['id'];
				// this.model.addr_county_id = county['id'];
				// this.model.addr_town_id = town['id'];
			},
			// 微信导入数据格式
			wxAddressInit() {
				let wxAddress = this.$Route.query.addressData; //微信导入
				this.model.id = 0;
				this.model.addr_name = wxAddress.userName;
				this.model.addr_phone = wxAddress.telNumber;
				// #ifdef MP-WEIXIN
				this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countyName}`;
				// #endif
				// #ifdef H5
				this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countryName}`;
				// #endif
				this.model.addr_addrdet = wxAddress.detailInfo.replace(/%20/g, '');
				this.model.status_default = false;
			},

			// 确认省市区
			regionConfirm(e) {
				this.model.area_text = `${e[0].label}-${e[1].label}-${e[2].label}`;
			},

			// 获取定位
			async getLocation() {
				// let authState = await new Auth('userLocation').check();
				// authState &&
				// 	uni.chooseLocation({
				// 		success: res => {
				// 			this.model.latitude = res.latitude;
				// 			this.model.longitude = res.longitude;
				// 			this.getLocationInfo();
				// 		},
				// 		fail: err => {
				// 			console.log(err);
				// 		}
				// 	});

			},

			//逆坐标解析
			async getLocationInfo() {
				// this.chooseAddress = '定位中...';
				// const [error, res] = await uni.request({
				// 	url: `https://restapi.amap.com/v3/geocode/regeo?location=${this.model.longitude},${this.model.latitude}&key=${MAP_KEY}`
				// });
				// if (res.data.status === '1') {
				// 	const addressComponent = res.data.regeocode.addressComponent;
				// 	this.chooseAddress = res.data.regeocode.formatted_address;
				// 	this.model.area_text = `${addressComponent.province}-${addressComponent.city.length ? addressComponent.city : addressComponent.province}-${
				// 		addressComponent.district
				// 	}`;
				// 	this.model.address = res.data.regeocode.formatted_address.replace(`${addressComponent.province}${addressComponent.city}${addressComponent.district}`, '');
				// } else {
				// 	console.log('%c逆地址解析失败，请检查是否在env中配置地图key', 'color:green;background:yellow');
				// }
			},

			// 提交
			submit() {

				this.$refs.uForm.validate(valid => {
					valid ? this.editAddress() : console.log('验证失败');
				});

			},

			// 编辑添加地址
			editAddress() {
				if (this.addressId) {
					this.model.address_id = this.model.id;
					this.$http.post(
						'/addons/yun_shop/api.php?i=4&type=2&route=member.member-address.update&ingress=weChatApplet&validate_page=1&app_type=wechat',
						this.model, {
							'paramsType': 2
						}).then(res => {
						this.$Router.back();
					})
				} else {
					this.$http.post('user.memberaddress', this.model).then(res => {
						this.$Router.back();
					})
				}
			},
			// 地址信息
			getAddressInfo() {
				// this.$http.post('personal.address.getAddressInfo', {keyid: this.addressId}).then(res => {
				// 	let addressData = res.data;
				// 	this.addressId = addressData.id;
				// 	this.model.status_default = addressData.status_default;
				// 	this.model.addr_addrdet = addressData.addr_addrdet;
				// 	this.model.addr_name = addressData.addr_name;
				// 	this.model.area_text = addressData.addr_main;
				// 	this.model.addr_phone = addressData.addr_phone;
				// 	this.model.addr_province_id = addressData.addr_province_id;
				// 	this.model.addr_city_id = addressData.addr_city_id;
				// 	this.model.addr_county_id = addressData.addr_county_id;
				// })
				let addressData = {
					"id": 65,
					"customer_id": 25,
					"status_default": true,
					"addr_name": "测试",
					"addr_phone": "15382852045",
					"addr_main": "北京北京昌平百善镇小果科技",
					"addr_addrdet": "小果科技",
					"addr_province_id": 110000,
					"addr_city_id": 110100,
					"addr_county_id": 110114
				};
				// this.addressId = addressData.id;
				this.model.status_default = addressData.status_default;
				this.model.addr_addrdet = addressData.addr_addrdet;
				this.model.addr_name = addressData.addr_name;
				// this.model.area_text = addressData.addr_main;
				this.model.addr_phone = addressData.addr_phone;
				this.model.addr_province_id = addressData.addr_province_id;
				this.model.addr_city_id = addressData.addr_city_id;
				this.model.addr_county_id = addressData.addr_county_id;
				// const that = this;
				// this.$http('address.info', {
				// 	id: that.$Route.query.id
				// }).then(res => {
				// 	if (res.code === 1) {
				// 		let addressData = res.data;
				// 		that.addressId = addressData.id;
				// 		that.model.area_text =
				// 			`${addressData.province_name}-${addressData.city_name}-${addressData.area_name}`;
				// 		that.model.status_default = addressData.status_default === '1' ? true : false;
				// 		that.model.addr_addrdet = addressData.addr_addrdet;
				// 		that.model.addr_phone = addressData.addr_phone;
				// 		that.model.addr_name = addressData.addr_name;
				// 	}
				// });
			},

			// 删除收货地址
			deleteAddress() {
				this.removeFlage = true;

			},
			removeCancel() {
				this.removeFlage = false;
			},
			removeConfirm() {
				let _this = this;
				this.$http.post('user.memberDeleteaddress', {
					i: 4,
					type: 2,
					route: "member.member-address.destroy",
					ingress: "weChatApplet",
					address_id: _this.addressId,
					validate_page: 1,
					app_type: "wechat"
				}).then(res => {
					this.removeFlage = false;
					this.$Router.back();
				})
			}
		}
	};
</script>

<style lang="scss">
	// 点击定位
	.location-item {
		font-size: 28rpx;

		font-weight: 500;
		background-color: #fff;
		color: rgba(167, 111, 13, 1);
	}

	// 表单
	.address-box {
		background-color: #fff;
		padding: 0 30rpx;
	}

	.address-item {
		height: 96rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
		padding: 0 25rpx;

		.item-title {
			color: #333;
			font-size: 28rpx;
			white-space: nowrap;
		}

		.inp {
			color: #333;
			font-size: 28rpx;
		}
	}

	.area-box {
		min-height: 120rpx;
		padding-bottom: 60rpx;
		background: #fff;
		padding: 30rpx 25rpx;

		.item-title {
			font-size: 28rpx;
			line-height: 28rpx;
			vertical-align: middle;
			white-space: nowrap;
		}

		.area-inp {
			color: #333;
			font-size: 28rpx;
			vertical-align: middle;
			margin-top: 8rpx;
			width: 550rpx;
		}
	}

	.default-box {
		height: 100rpx;
		padding: 0 25rpx;
		background: #fff;
		margin-top: 20rpx;

		.title {
			font-size: 28rpx;
		}

		.switch {
			transform: scale(0.8);
		}
	}

	// 底部按钮
	.foot_box {
		.delete-btn {
			line-height: 70rpx;
			background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			border-radius: 35rpx;
			padding: 0;
			margin-right: 20rpx;
		}

		.save-btn {
			line-height: 70rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 40rpx;
			color: rgba(#fff, 0.9);
		}
	}
</style>
